<template>
    <el-drawer title="订单发货" v-model="drawerVisible" direction="rtl" size="30%" :destroy-on-close="true" >
        <el-form :model="form"  label-width="80px" :inline="false" size="normal" >
            <el-form-item label="快递公司">
                    <el-select v-model="form.express_company" placeholder="请选择快递公司" clearable>
                        <el-option v-for="item in  expressCompanyList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
            </el-form-item>
            <el-form-item label="快递单号">
                <el-input v-model="form.express_no" placeholder="快递单号" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
    
</template>

<script setup>
import {reactive, ref} from "vue"
import { getExpressCompany , shipOrder } from "~/api/order.js"
import { toast } from '~/composables/util.js';

const drawerVisible = ref(false);
const  expressCompanyList = ref([]);
const form = reactive({
    express_company:"",
    express_no:""

})
const orderId = ref();
function getList(){
    getExpressCompany()
        .then(res => {
            expressCompanyList.value = res.list;
        })
}

const open = (id) =>{
    drawerVisible.value = true;
    getList();
    orderId.value = id;
}
const close = () => drawerVisible.value = false;

const loading = ref(false);

const onSubmit = () => {
    loading.value = true;
    shipOrder(orderId.value,form)
        .then(res =>{
            toast('发货成功');
        }).finally(() => {
            loading.value = false;
        })
}
defineExpose({
    open,
    close
})
</script>